<template>
	<view class="more">
		<!-- 头部 -->
		<view class="more-header">
			<view class="left">
				<text>千图好货</text>
				<text>会员俱乐部</text>
			</view>
			<image src="/static/home/setting.png" mode=""></image>
		</view>
		<!-- 快速入口 -->
		<view class="more-entry">
			<view class="enter-item">
				<view class="enter-item-inner">
					<text class="inner-head">每日秒杀</text>
					<text class="inner-time">10点开抢</text>
				</view>
			</view>
			<view class="enter-item">
				<view class="enter-item-inner">
					<text class="inner-head">9.9元包邮</text>
					<text class="inner-time">零点</text>
				</view>
			</view>
			<view class="enter-item">
				<view class="enter-item-inner">
					<text class="inner-head">母婴用品</text>
					<text class="inner-time">立减10</text>
				</view>
			</view>
			<view class="enter-item">
				<view class="enter-item-inner">
					<text class="inner-head">新鲜好货</text>
					<text class="inner-time">特汇购</text>
				</view>
			</view>
			<view class="enter-item">
				<view class="enter-item-inner">
					<text class="inner-head">大牌折扣</text>
					<text class="inner-time">限时1折</text>
				</view>
			</view>
			<view class="enter-item">
				<view class="enter-item-inner">
					<text class="inner-head">一元买书</text>
					<text class="inner-time">自营</text>
				</view>
			</view>
		</view>
		<!-- 商品分类 -->
		<view class="goods-category">
			<view class="goods-nav">
				<view class="goods-nav-item active-goods-nav-item">看推荐</view>
				<view class="goods-nav-item">逛附近</view>
				<view class="goods-nav-item">苹果</view>
				<view class="goods-nav-item">摄影器材</view>
				<view class="goods-nav-item">家具商城</view>
			</view>
			<!-- 展示 -->
			<userComment></userComment>
		</view>
	</view>
</template>

<script>
import userComment from '../../components/user-comment/user-comment.vue';
export default {
	data() { 
		return {};
	},
	components: {
		userComment
	}
};
</script>

<style lang="scss">
.more {
	width: 710rpx;
	padding: 64rpx 0;
	margin: 0 auto;
	.more-header {
		display: flex;
		justify-content: space-between;
		margin-bottom: 50rpx;
		.left {
			text {
				font-weight: bold;
				font-size: 42rpx;
				&:nth-child(2) {
					font-size: 25rpx;
					color: #bbb9b9;
					margin-left: 10rpx;
				}
			}
			image {
				width: 84rpx;
				height: 25rpx;
				margin-left: 10rpx;
			}
		}
		image {
			width: 45rpx;
			height: 45rpx;
		}
	}
	.more-entry {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 74rpx;
		.enter-item {
			width: 228rpx;
			height: 228rpx;
			margin-bottom: 12rpx;
			.enter-item-inner {
				margin-top: 20rpx;
				margin-left: 23rpx;
				display: flex;
				flex-direction: column;
				.inner-head {
					font-size: 28rpx;
					margin-bottom: 10rpx;
				}
				.inner-time {
					font-size: 22rpx;
					color: #fff;
					padding: 4rpx 10rpx;
					border-radius: 7rpx;
				}
			}
			&:nth-child(1) {
				background: url(../../static/more/enter-item1.png);
				background-size: 100% 100%;
				.inner-head {
					color: #7587a1;
				}
				.inner-time {
					width: 108rpx;
					background-color: #adb8d4;
				}
			}
			&:nth-child(2) {
				background: url(../../static/more/enter-item2.png);
				background-size: 100% 100%;
				margin: 0 13rpx;
				.inner-head {
					color: #bc7881;
				}
				.inner-time {
					width: 57rpx;
					background-color: #e2aeb5;
				}
			}
			&:nth-child(3) {
				background: url(../../static/more/enter-item3.png);
				background-size: 100% 100%;
				.inner-head {
					color: #9f7f67;
				}
				.inner-time {
					width: 90rpx;
					background-color: #d4b58a;
				}
			}
			&:nth-child(4) {
				background: url(../../static/more/enter-item4.png);
				background-size: 100% 100%;
				.inner-head {
					color: #5e8b78;
				}
				.inner-time {
					width: 90rpx;
					background-color: #88b6a4;
				}
			}
			&:nth-child(5) {
				background: url(../../static/more/enter-item5.png);
				background-size: 100% 100%;
				margin: 0 13rpx;
				.inner-head {
					color: #7b959d;
				}
				.inner-time {
					width: 95rpx;
					background-color: #b4ccd4;
				}
			}
			&:nth-child(6) {
				background: url(../../static/more/enter-item6.png);
				background-size: 100% 100%;
				.inner-head {
					color: #578e76;
				}
				.inner-time {
					width: 64rpx;
					background-color: #82bfa6;
				}
			}
		}
	}
	.goods-category {
		.goods-nav {
			display: flex;
			justify-content: space-around;
			.active-goods-nav-item {
				border-bottom: 2px solid #5c70fb;
				color: #000;
				font-weight: bold;
			}
			.goods-nav-item {
				box-sizing: border-box;
				font-size: 28rpx;
			}
		}
	}
}
</style>
